<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM的修改</title>
    <script>
        window.onload=function(){

            /* 
                1.元素.appendChild()用于给一个元素节点添加子节点

                2.元素.insertAdjacentElement("1.要添加的位置",2.要添加的元素) 可以向元素的任意位置添加另外一个元素
                    要添加的位置参数选择
                        beforeend       元素结束标签的前面（子元素）
                        beforebegin     元素开始标签的前面（兄弟元素）
                        afterbegin      元素开始标签的后面（子元素）
                        afterend        元素结束标签的后面（兄弟元素）

                3. 元素.insertAdjacentHTML("相对于元素的位置","添加代码") 
                    ul.insertAdjacentHTML("afterbegin","<li id='no_exsit'>No_Exist</li>")

                4. 元素.replaceWith(另外一个元素)    使用另外一个替换当前的元素
                    no_exsit.replaceWith(li)

                5. 元素.remove()       删除当前元素


            */
            // 点击按钮之后，向ul中添加一个“Romeo”

        // 获取按钮
        const btn01= document.getElementById("btn01")
        // 获取ul
        const ul=document.querySelectorAll(".family")[0]

        btn01.onclick=function(){
            
            // 创建一个li元素
            const li =document.createElement("li")
            // li中添加文本
            li.innerHTML="Romeo"
            // 给li添加id属性
            li.id="romeo"

console.log(li)
            //将这个新创建的元素添加到DOM树里

            // 1. 元素.appendChild()用于给一个节点添加子节点

            // ul.appendChild(li)
            
            // 2. 元素.insertAdjacentElement(“1.要添加的位置”,2.要添加的元素)    可以向元素的任意位置添加元素
                /* 
                    要添加的位置参数选择
                        beforeend       元素结束标签的前面（子元素）
                        beforebegin     元素开始标签的前面（兄弟元素）
                        afterbegin      元素开始标签的后面（子元素）
                        afterend        元素结束标签的后面（兄弟元素）
                */

            ul.insertAdjacentElement("beforeend",li)

            // 3. 元素.insertAdjacentHTML("相对于元素的位置","添加代码") 

            ul.insertAdjacentHTML("afterbegin","<li id='no_exsit'>No_Exist</li>")
        }


        // 点击btn02 将no_exsit替换为empty
        const btn02=document.getElementById("btn02")
        btn02.onclick=function(){
            const li=document.createElement("li")
            li.textContent="Empty"
            li.id="empty"
            const no_exsit=document.getElementById('no_exsit')
            const empty=document.getElementById('empty')

            no_exsit.replaceWith(li)

            const romeo=document.getElementById("romeo")
            romeo.remove()
        }
        const btn03=document.getElementById("btn03")
        btn03.onclick=function(){
            const empty=document.getElementById("empty")
            empty.remove()
        }
    }

    </script>
</head>
<body>
    <button id="btn01">按钮1</button>
    <button id="btn02">按钮2</button>
    <button id="btn03">按钮2</button>
    <hr>
    <ul class="family" >
        <li id="shaw">ShawLee</li>
        <li id="juilet">Juilet</li>
        <li id="leep">Leep</li>
    </ul>
</body>
</html>